@ViewChild

자식 엘리먼트와 같이 캡슐화되어 있는, 템플릿의 경우 템플릿이 그려진 이후에 참조가 가능하다. 이때 @ViewChild를 이용하면 템플릿이 만들어지기 전에 참조 가능하다.

지시자는 템플릿 내에 선언돼 있기 때문에(쉐도우 DOM), 초기화 되고 나서 지시자 정보를 얻을 수 있다. 때문에 @ViewChild와 setTimeout()함수를 이용해 상태정보를 알아냄.

@ViewChild(클래스명) 변수명: 클래스명;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import {AfterViewInit, Component, Directive, Input, ViewChild} from '@angular/core';

// 지시자의 속성값은 DOM 생성 후 알 수 있음.
@Directive({ selector: 'item' })
export class Item {
  @Input() status: boolean;
}

@Component({
  selector: 'item-component',
  template: '<button>알림창</button>'
})
export class ItemComponent {
  display(){
    alert('ItemComponent입니다');     
  }
}

@Component({
  selector: 'app-view-child',
  template: `
    <item status="false" *ngIf="isShow==false"></item>
    <item status="true" *ngIf="isShow==true"></item>    
    <button (click)="toggle()">선택</button><br>
    isShow : {{isShow}}<br>
    status : {{status}}<br>    
    <item-component (click)="display()"></item-component>`
})
export class ViewchildComponent {

  //@ViewChild를 통해 첫번째 item 엘리먼트를 가져옴.
  @ViewChild(Item)
  set item(v: Item) {    
    setTimeout(() => { this.status = v.status; }, 0);
  }

  @ViewChild(ItemComponent) itemComponent: ItemComponent;
  isShow: boolean = true;
  status: boolean;
 
  toggle() {
    this.isShow = !this.isShow;
  }

  display(){
    this.itemComponent.display();
  } 
}

@ViewChildren

@ViewChildren(‘설명 레이블’) children:QueryList<참조 변수의 형>;

복수개의 캡슐화된 엘리먼트(쉐도우 Dom)를 참조한다.

1
2
3
4
5
6
7
8
...
<child-cmp #child1 [childname]="'자식1'"></child-cmp>
<child-cmp #child2 [childname]="'자식2'"></child-cmp>
<child-cmp #child3 [childname]="'자식3'"></child-cmp>
...
export class ViewchildrenComponnet {
  @ViewChildren('child1,child2,child3') children:QueryList<ChildCmp>;
}

번외

  • @ContentChild : DOM의 단수 개의 엘리먼트 가져오기

    @ContentChild(클래스명) 사용할 변수명: 클래스명;

  • @ContentChildren : DOM의 복수 개의 엘리먼트 가져오기

    @ContentChildren(클래스명) 사용할 변수명: 클래스명;

Reference

쉽고 빠르게 배우는 Angular2 프로그래밍 - 정진욱

@ViewChild와 @ConentChild의 차이 http://stackoverflow.com/questions/34326745/whats-the-difference-between-viewchild-and-contentchild